<template>
  <div :class="['TUIKit', isH5 && 'TUIKit-h5']">
<!--    <div v-if="!(isH5 && currentConversationID)" class="TUIKit-navbar">-->
<!--      <div-->
<!--          v-for="item of navbarList"-->
<!--          :key="item.id"-->
<!--          :class="['TUIKit-navbar-item', currentNavbar === item.id && 'TUIKit-navbar-item-active']"-->
<!--          @click="currentNavbar = item.id"-->
<!--      >-->
<!--        {{ item.label }}-->
<!--      </div>-->
<!--    </div>-->
<!--    <el-row>-->
<!--      <el-col :span="24">-->
        <div class="TUIKit-main-container">
          <div v-if="currentNavbar === 'conversation'" class="TUIKit-main">
            <div v-if="!(isH5 && currentConversationID)" class="TUIKit-main-aside">
<!--              <TUISearch searchType="global"></TUISearch>-->
              <CustomSearch></CustomSearch>
              <TUIConversation></TUIConversation>
            </div>
            <div v-if="!isH5 || currentConversationID" class="TUIKit-main-main">
              <TUIChat></TUIChat>
              <TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" />
<!--              <TUISearch :class="isH5 ? 'chat-popup' : 'chat-aside'" searchType="conversation" />-->
            </div>
            <TUIGroup v-if="isH5 && !currentConversationID" class="chat-popup" />
            <TUIContact displayType="selectFriend" />
          </div>
          <!--      <div v-else-if="currentNavbar === 'contact'" class="TUIKit-main">-->
          <!--        <TUIContact-->
          <!--            displayType="contactList"-->
          <!--            @switchConversation="currentNavbar = 'conversation'"-->
          <!--        />-->
          <!--      </div>-->
          <TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" />
        </div>
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue";
import { TUISearch, TUIConversation, TUIChat, TUIContact, TUIGroup } from "./../TUIKit";
import { isH5 } from "./../TUIKit/utils/env";
import CustomSearch from "@/TUIKit/components/CustomSearch/index.vue";

const currentConversationID = ref<string>("");
const currentNavbar = ref<string>("conversation");
// const navbarList = [
//   {
//     id: "conversation",
//     label: "会话",
//   },
//   {
//     id: "contact",
//     label: "通讯录",
//   },
// ];
TUIStore.watch(StoreName.CONV, {
  currentConversationID: (id: string) => {
    currentConversationID.value = id;
  },
});

onMounted(() => {

})
</script>
<style scoped lang="scss">
@import "./../TUIKit/assets/styles/common.scss";
@import "./../TUIKit/assets/styles/sample.scss";
</style>
